<template>
  <div id="nav">
    <router-link to="/">Home</router-link>|
    <router-link :to="{name:'About'}">About</router-link>
    <h2>Profile links</h2>
    <ul>
      <li v-for="(id,index) in userIds" :key="index">
        <router-link :to="{name:'Profile',params:{user_id:id}}">Profile {{id}}</router-link>
      </li>
    </ul>

    <h3>Control Buttons</h3>
    <ul>
        <li><button @click="goBack">Back</button></li>
        <li><button @click="goHome">Go Home</button></li>
        <li><button @click="goForward">Forward</button></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Navbar",
  props: {
    userIds: {
      type: Array,
      default:()=> [1, 2, 3, 4]
    }
  },
  methods:{
      goHome(){
          this.$router.push({name:'Home'})
      },
      goBack(){
          this.$router.go(-1)
      },
      goForward(){
          this.$router.go(1)
      }
  }
};
</script>

<style lang="css" scoped>
li{
    list-style: none;
    display: inline-block;
    margin:2rem;
}
</style>